<template>
    <div class="leftMenu">
        <el-menu
            active-text-color="#fff"
            class="el-menu-vertical-demo"
            default-active="/home"
            background-color="#8fc5bb"
            text-color="#406c69"
            :collapse="isCollapse"
            unique-opened="true">
            <template v-for="(item,index) in tableData" :key="index">
                <el-menu-item @click='menuClick(item)' :index="item.path" v-if="item.children.length == 0">
                    <el-icon><component :is="item.icon" /></el-icon>
                    <span>{{ item.topic }}</span>
                </el-menu-item>
                <el-sub-menu :index="index" v-else>
                    <template #title ><el-icon><component :is="item.icon"/></el-icon><span>{{ item.topic }}</span></template>
                    <el-menu-item @click='menuClick(it)' v-for="(it,i) in item.children" :key="i" :index="it.path"><el-icon><component :is="it.icon"/></el-icon><template #title>{{ it.topic }}</template></el-menu-item>
                </el-sub-menu>
            </template>
        </el-menu>
    </div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { useStore } from 'vuex' 
import { useRouter } from 'vue-router';
export default defineComponent({
    data(){
        return{
            userMessage:null,
            ManageModel:false,
            tableData:[],
            isCollapse:false
        }
    },
    setup() {
        const store = useStore();
        const router = useRouter()
        return{
            store,
            router
        }
    },
    props:{
        Collapse:{
            type:Boolean,
            default:{}
        }
    },   
    watch: {
        Collapse:{
            handler(newValue) {
                this.isCollapse = !newValue;
            },
            deep: true
        }
    },
    created () {
        this.userMessage = this.store.state.UserMessage;
        if(this.userMessage&&this.userMessage.Identify=='0'){
            this.ManageModel = true;
        }
        this.LoadData();
    },
    methods:{
        LoadData(){
            let self = this;
            self.$http.get(`${self.baseUrl}/catalog/all?identify=${self.userMessage.Identify}`).then(res=>{
              self.tableData = res.data;  
            })
        },
        // 菜单点击时触发的方法
        menuClick(row){
            // 将当前点击的对象传递给指定方法
            this.store.commit("addHeaderTabs",row)
            // 跳转相关路由
            this.router.push({
                path:row.path
            })
        }
    }
})
</script>
<style scoped>
    .leftMenu{
        position: absolute;
        left: 0;
        height: calc(100% - 66px);
        overflow: hidden;
        border-radius: 12px;
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
    }
    .el-menu{
        height: 100%;
    }
</style>